import React, { Component } from 'react';

// 导入组件
import { NavBar, } from 'antd-mobile'
import MySwiper from '../components/MySwiper';
import { StarOutline, SendOutline, TruckOutline } from 'antd-mobile-icons'

// 导入样式
import '../styles/Detail/Detail.scss'
// 导入全部封装请求
import *as service from '../api/index'
class Detail extends Component {
    // 定义组件状态
    constructor(props) {
        super(props);
        this.state = {
            goodinfo: {}
        }
    }

    componentDidMount() {
        // 请求商品的详情
        service.good_goodinfo({ goodid: this.props.location.state.id }).then((res) => {
            // 处理服务端返回的图片列表，将数组、字符串转换为数组加对象
            res.data.goodinfo.pics =
                res.data.goodinfo.pics &&
                res.data.goodinfo.pics.map((item, index) => {
                    return { pic: item };
                })

            // 保存商品详情
            this.setState({
                goodinfo: res.data.goodinfo
            })
        })
    }

    back() {
        // 返回上一个路由
        this.props.history.go(-1);
    }

    Shopcart() {
        //跳到购物车页
        this.props.history.push({ pathname: '/Index/Shopcart' })
    }

    render() {
        return (
            <div className='detail'>
                {/* 顶部导航 */}
                <NavBar onBack={() => { this.back() }}>商品详情</NavBar>
                {/* 轮播图 */}
                <MySwiper swiperlist={this.state.goodinfo.pics} />
                <h3>COSME DECORTE黛珂植物欣韵沁莹化妆水2
                    00ml
                </h3>
                <p>COSME DECORTE黛珂植物欣韵沁莹化妆水2
                    00ml</p>
                <div className='bottom'>
                    {/* 图标 */}
                    <div className='left'>
                        <div>
                            <div><StarOutline fontSize={24} /></div>
                            <div>收藏</div>
                        </div>
                        <div>
                            <div> <SendOutline fontSize={24} /></div>
                            <div>分享</div>
                        </div>
                        <div>
                            <div>   <TruckOutline fontSize={24} /></div>
                            <div>购物车</div>
                        </div>
                    </div>
                    <div className='right'>
                        <div className='right-one' onClick={() => { this.Shopcart() }}>加入购物车</div>
                        <div className='right-two'>立即购买</div>
                    </div>
                </div>
            </div>
        );
    }
}

export default Detail;